<template>
	<view>
		<q-field label="圈子名称" v-model="form.name" :required="true" placeholder="请填写圈子名称"></q-field>
		<q-field label="圈子介绍" type="textarea" v-model="form.description" :required="true" placeholder="请填写圈子介绍,大于10个字符"></q-field>
		<view class="form-item">
			<view class="label">圈子头像</view>
			<q-upload :maxCount="1" :file="coverMediaList" ref="ossUpload" @success="coverSuccess" :autoUpload="true" :topicAvatar="true"></q-upload>
		</view>
		<view class="form-item">
			<view class="label">圈子背景</view>
			<q-upload :maxCount="1" :file="bgMediaList" ref="ossUpload" @success="bgSuccess" :autoUpload="true" :topicBg="true"></q-upload>
		</view>
		<!-- 提交按钮 -->
		<q-button shape="circle" @click="onSubmit">提交</q-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: '',
				description: '',
				cover_image: '',
				bg_image: ''
			},
			coverMediaList: [],
			bgMediaList: []
		};
	},
	computed: {
		userInfo() {
			return this.$store.state.user.userInfo;
		}
	},
	onShow() {
		if (!this.userInfo) {
			this.$store.dispatch('mnpLogin');
		}
	},
	methods: {
		onSubmit() {
			if (!this.form.name) {
				this.$u.toast('请填写圈子名称');
				return;
			}

			if (this.form.description.length < 10) {
				this.$u.toast('请填写圈子介绍，大于10个字符');
				return;
			}

			if (!this.form.cover_image) {
				this.$u.toast('请上传圈子头像图');
				return;
			}

			if (!this.form.bg_image) {
				this.$u.toast('请上传圈子背景图');
				return;
			}

			uni.showLoading({
				mask: true,
				title: '提交中'
			});

			this.$H.post('topic/topicAdd', this.form).then((res) => {
				if (res.code == 200) {
					this.$u.toast('成功创建圈子');

					uni.redirectTo({
						url: '/pages/topic/index?topic_id=' + res.result.id
					});
				}
			});
		},
		coverSuccess(e) {
			this.form.cover_image = e[0].url;
		},
		bgSuccess(e) {
			this.form.bg_image = e[0].url;
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}

.upload-wrap {
	padding: 30rpx;
}

.form-item {
	background-color: #fff;
	padding: 30rpx;

	.label {
		margin-bottom: 10rpx;
	}
}
</style>
